<template>
	<view class="container">
		<image src="../../../static/image/video/BANNER.png" mode="" style="width: 100%;height:250rpx;"></image>
		<u-grid :border="false" col="5" style="justify-content: space-around;">
			<u-grid-item u-slot v-for="(item,index) in menuList" :key="index" @click="itemType(item)" >
				<view >
					<image class="icon" :src="item.icon" mode=""></image>
				</view>
				<text class="grid-text" style="font-weight: 400;font-size: 12px;">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
		<view class="">
			<view style="display: flex;align-items: center;">
				<text style="flex: 1;font-weight: 700;font-size: 16px;">资讯新闻</text>
				<text style="font-weight: 400;font-size: 12px;color: #9f9f9f;">查看全部</text>
				<uni-icons type="forward" size="15" color="#9f9f9f"></uni-icons>
			</view>
			<view class="each_News" v-for="(item,index) in each_News" :key='index'>
				<view class="item-text">
					<view>{{item.title}}</view>
					<text>{{item.time}}</text>
				</view>
				<image :src="item.url"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
					title: '最新动态',
					icon: '../../../static/image/Vector01.png',
				}, {
					title: '村组风貌',
					icon: '../../../static/image/Vector02.png',
				}, {
					title: '村组干部',
					icon: '../../../static/image/Vector03.png',
				}, {
					title: '常见问答',
					icon: '../../../static/image/Vector04.png',
				}],

				each_News: [{
					title: '中国.青川“阴平村”旅行散记',
					time: '2020-4-28 21:30',
					url: '../../../static/organize/organize_News_img.png'
				}, {
					title: '中国.青川“阴平村”旅行散记',
					time: '2020-4-28 21:30',
					url: '../../../static/organize/organize_News_img.png'
				}],
			}
		},

		methods: {
			itemType(item) {

			}
		},
	}
</script>

<style scoped lang="scss">

	.container {
		padding: 0rpx 27.2rpx;

		// 菜单图标
		.icon {
			width: 80rpx;
			height: 80rpx;
		}

		.each_News {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F5F5F5;
			margin-bottom: 16rpx;
			margin-top: 27.2rpx;

			image {
				width: 208rpx;
				height: 152rpx;
				margin-bottom: 16rpx;
			}

			.item-text {
				width: 400rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-bottom: 16rpx;

				text {
					color: #9F9F9F;
					font-size: 12px;
				}
			}
		}
	}
</style>
